import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as actions from "../../store/action"
import { bindActionCreators} from "redux"
import { Table, Tag, Space, TimePicker } from 'antd';
import styles from "./chaxun.module.css"
import moment from "moment"
const {Option}= Select
const objState={
  "onLine":"已上线",
  "running":"运行中",
  "error":"错误",
  "close":"关闭"
}
export class Chaxuan extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
      isModalVisible:false
     
    }
    this.formRef=React.createRef()
    this.searchFormRef=React.createRef()
  }
  componentDidMount(){
    this.props.getDataAction()
  }
  handleOk(){
    this.setState({
      isModalVisible:false
    })
  }
  handleCencel(){
    this.setState({
      isModalVisible:false
    })
  }
  onFinish(values){
    let time =moment(values.date).format("YYYY年MM-DD HH:mm:ss")
    this.props.addDataAction({
      ...values,
      id:new Date() *1,
      key:new Date() *1,
      date:time
    })
  }
  onFinishSearch(values){
    this.props.searchDataAction(values)
  }
  onReset(){
    this.searchFormRef.current.resetFields()
    this.props.getDataAction()
  }
  render() {
    const {data}=this.props
    const {isModalVisible}=this.state
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    
      },
      {
        title: '描述',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: '次数',
        dataIndex: 'num',
        key: 'num',
      },
      {
        title: '状态',
        key: 'state',
        dataIndex: 'state',
        render:(item)=>{
          return <b className={styles[item]}>{objState[item]}</b>
        }
      },
      {
        title: '时间',
        dataIndex: 'date',
        key: 'date',
      },
      {
        title:"编辑",
        render:(item)=>{
          return <div>
            <button>编辑</button>
            <button onClick={
              ()=>{
                this.props.removeDataAction(item.id)

              }
            }>删除</button>
          </div>
        }


      }
    ];
    return (
      <div>
        <div>  
           <Form
           ref={this.searchFormRef}
      name="serch"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{
        name:'',
        title:'',
        state:'',

      }}
      onFinish={this.onFinishSearch.bind(this)}
      onFinishFailed={this.onFinishFailed.bind(this)}
      autoComplete="off"
    >
      <Form.Item
        label="姓名"
        name="name"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="描述"
        name="title"
        rules={[{ required: false,  }]}
      >
  
      </Form.Item>
      <Form.Item
        label="次数"
        name="num"
        rules={[{ required: false,message:"请输入次数"  }]}
      >
      </Form.Item>
      <Form.Item
        label="状态"
        name="state"
        rules={[{ required: false,message:"请选择状态"  }]}
       
      >
         <Select>
        <Option value="">请选择</Option>
        <Option value="onLine">已上线</Option>
        <Option value="running">运行中</Option>
        <Option value="error">错误</Option>
        <Option value="close">关闭</Option>
      </Select>

      </Form.Item>
      <Form.Item
        label="时间"
        name="date"
        rules={[{ required: false,message:"请选择时间"  }]}

      >
      </Form.Item>

     

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
       查询
        </Button>
        <Button type="button" onClick={this.onReset.bind(this)}>
        重置
        </Button>
      </Form.Item>
    </Form></div>
      <div>
        <button onClick={()=>{
          this.setState({
              isModalVisible:true
          })

        }}>新增</button>
      </div>
      <Table
        columns={columns}
        dataSource={data}
      />
   
        <Modal 
        title="新增标题" 
        visible={isModalVisible}
        onOk={this.handleOk.bind(this)}
        onCancel={this.handleCencel.bind(this)}
        footer={null}>
       <Form
   
      name="add"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={this.onFinish.bind(this)}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="姓名"
        name="name"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="描述"
        name="title"
        rules={[{ required: false,  }]}
      >
  
      </Form.Item>
      <Form.Item
        label="次数"
        name="num"
        rules={[{ required: false,message:"请输入次数"  }]}
      >
      </Form.Item>
      <Form.Item
        label="状态"
        name="state"
        rules={[{ required: false,message:"请选择状态"  }]}
       
      >
         <Select>
        <Option value="">请选择</Option>
        <Option value="onLine">已上线</Option>
        <Option value="running">运行中</Option>
        <Option value="error">错误</Option>
        <Option value="close">关闭</Option>
      </Select>

      </Form.Item>
      <Form.Item
        label="时间"
        name="date"
        rules={[{ required: false,message:"请选择时间"  }]}

      >
        <TimePicker defaultPickerValue={moment("00:00:00","HH-mm-ss")}></TimePicker>
      </Form.Item>

     

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
    </Modal>
    
    </div>
  );
};

    
  
}

const mapStateToProps = (state) => ({
... state.reducer
})

const mapDispatchToProps = (disptch)=>{
  return bindActionCreators(actions,disptch)
}



export default connect(mapStateToProps, mapDispatchToProps)(Chaxuan)